<template>
    <div class="py-5 grid gap-3 grid-cols-4">
        <div v-for="item in list" :key="item.artistId"
            class="grid place-items-center py-7 hover:bg-white rounded-xl transition-all duration-300 group/bgHover">
            <div class="w-36 h-36 relative">
                <img :src="item.artistAvatarPicUrl" class="w-36 h-36 object-cover rounded-full " alt="">
                <div
                    class="absolute top-0 left-0 w-full h-full rounded-full text-white flex items-center justify-center group-hover/bgHover:bg-black/50">
                    <!--  暂停按钮 -->
                    <svg t="1744510444258" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        @click="pauseArtistHotSong" v-if="singerId === item.artistId && isPlaying"
                        xmlns="http://www.w3.org/2000/svg" p-id="19202" width="50" height="50">
                        <path
                            d="M209.645253 863.934444l201.049992 0 0-703.866842L209.645253 160.067602 209.645253 863.934444zM611.804588 863.934444l201.113437 0 0-703.866842L611.804588 160.067602 611.804588 863.934444z"
                            p-id="19203" fill="#ffffff"></path>
                    </svg>
                    <!-- 播放按钮 -->
                    <svg t="1744509830429" @click="playArtistHotSong(item.artistId)" v-else
                        class="icon invisible group-hover/bgHover:visible duration-300 transition-all"
                        viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18078" width="50"
                        height="50">
                        <path
                            d="M780.8 475.733333L285.866667 168.533333c-27.733333-17.066667-64 4.266667-64 36.266667v614.4c0 32 36.266667 53.333333 64 36.266667l492.8-307.2c29.866667-14.933333 29.866667-57.6 2.133333-72.533334z"
                            fill="#ffffff" p-id="18079" data-spm-anchor-id="a313x.search_index.0.i3.17343a81figqvN"
                            class="selected"></path>
                    </svg>

                </div>
            </div>
            <div class="w-full text-center text-sm text-#333 py-3">{{ item.artistName }}</div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useStore } from '@renderer/store';
import { storeToRefs } from 'pinia'
import { ref } from 'vue';

const { list } = defineProps<{
    list: any[]
}>()
const { searchStore, playListStore, songDetailStore } = useStore();
const { singerHotSongList } = storeToRefs(searchStore)
const isPlaying = ref(false)
const singerId = ref(0 as number | null)

const playArtistHotSong = (id: number) => {
    singerId.value = id
    searchStore.getSingerHotSong(id).then(() => {
        isPlaying.value = true
        let songId = singerHotSongList.value[0].id
        songDetailStore.getSongDetail(songId)
        songDetailStore.getSongUrl(songId)
        // 播放歌曲
        playListStore.addAllSongToPlayList(singerHotSongList.value)
    })
}
const pauseArtistHotSong = () => {
    isPlaying.value = false
    playListStore.pauseOrPlay()
}
</script>